<template>
  <div class="app-container">
    <el-row :gutter="20" class="height-auto">
      <el-col :span="8">
        <div class="search-container">
          <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="queryParams.name"/>
            </el-form-item>
            <!--            <el-form-item label="身份证号" prop="chineseWesternType">-->
            <!--              <el-input v-model="queryParams.name"/>-->
            <!--            </el-form-item>-->
            <el-form-item label="联系电话" prop="telephone">
              <el-input v-model="queryParams.telephone"/>
            </el-form-item>
            <el-form-item>
              <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
              <el-col :span="1.5">
                <el-button plain type="primary" @click="handleAdd">
                  <template
                    #icon>
                    <i-ep-plus/>
                  </template>
                  新增
                </el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <el-table v-adaptive :border="true" :data="nurseVisitRecordList" :header-cell-style="$headerCellStyle"
                  :stripe="true" highlight-current-row @rowClick="handleUpdate">
          <el-table-column :align="'center'" fixed="left" label="姓名" prop="name" width="60"/>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="年龄" prop="age" width="45"/>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="国籍" prop="nationality" width="45"/>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="性别" prop="sex" width="45"/>
          <el-table-column :align="'center'" label="航班号" prop="hangbanhao"/>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="联系电话" prop="telephone"
                           width="80"/>
          <el-table-column :align="'center'" label="通知部门" prop="tongzhibumen"/>
          <el-table-column :align="'center'" label="接警人员" prop="jiejingrenyuan"/> 
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="通知内容" prop="tongzhineirong"
                           width="100"/> 
          <el-table-column :align="'center'" label="接警时间" prop="jiejingshijian" width="130">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.jiejingshijian, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="到达时间" prop="daodashijian" width="130">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.daodashijian, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="返回时间" prop="fanhuishijian" width="130">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.fanhuishijian, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" fixed="right" label="记录人" prop="createByName" width="55"/>

          <el-table-column :align="'center'" fixed="right" label="记录时间" prop="createTime" width="130">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getList"
        />
      </el-col>
      <el-col :span="16" class="height-auto">
        <el-empty v-if="form.patientId === undefined" description="请点击左侧需要记录或者打印的数据行"></el-empty>
        <template v-else>
          <el-form ref="formRef" :model="form" :rules="rules" class="height-auto">
            <div class="a4-paper-responsive">
              <div style="position: absolute; top: 10px; z-index: 2">
                <el-button v-if="form.createByName === userInfo.nickName || !form.onSiteAmbulanceStationId" type="success" @click="submitForm">保 存</el-button>
                <el-button v-show="form.patientId !== undefined && form.patientId !== ''" style="margin-left: 10px"
                           type="primary" @click="printDiv">
                  <template #icon>
                    <i-ep-printer/>
                  </template>
                  打印
                </el-button>
              </div>
              <div style="justify-items: center">
                <h3>院前急救人员出诊记录</h3>
              </div>
              <el-row> 
                  <el-form-item label="接警时间" label-width="80" prop="jiejingshijian">
                    <el-date-picker
                        v-model="form.jiejingshijian"
                        clearable
                        placeholder="请选择开始时间"
                        type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                      />
                  </el-form-item> 
                  <el-form-item label="到位时间" label-width="80" prop="daoweishijian">
                    <el-date-picker
                      v-model="form.daoweishijian"
                      clearable
                      placeholder="请选择开始时间"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item> 
                  <el-form-item label="返回时间" label-width="80" prop="fanhuishijian">
                    <el-date-picker
                      v-model="form.fanhuishijian"
                      clearable
                      placeholder="请选择开始时间"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    />
                  </el-form-item> 
              </el-row>
              <el-row>
                <el-col :span="19">
                  <el-form-item label="电话内容" label-width="80" prop="dianhuaneirong">
                    <el-input v-model="form.dianhuaneirong" maxlength="256" rows="3" show-word-limit type="textarea"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="通知部门" label-width="80" prop="tongzhibumeng">
                  <el-input v-model="form.tongzhibumeng"></el-input>
                </el-form-item>
                <el-form-item label="接警人员" label-width="80" prop="jiejingrenyuan">
                  <el-input v-model="form.jiejingrenyuan"></el-input>
                </el-form-item>
                <el-form-item label="出诊耗时" label-width="80" prop="chuzhenhaoshi">
                  <el-input v-model="form.chuzhenhaoshi"></el-input>
                </el-form-item>
              </el-row> 
              <el-row>
                <el-col :span="5">
                  <el-form-item label="姓名" label-width="80" prop="name">
                    <el-input v-model="form.name" class="width-120" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="性别" label-width="80" prop="sex">
                    <el-input v-model="form.sex" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="年龄" label-width="80" prop="age">
                    <el-input v-model="form.age" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="国籍" label-width="80" prop="nationality">
                    <el-input v-model="form.nationality" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="身份" label-width="80" prop="shenfen">
                    <el-input v-model="form.shenfen" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="航班号" label-width="80" prop="hangbanhao">
                    <el-input v-model="form.hangbanhao" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="进出港" label-width="80" prop="jinchugang">
                    <el-input v-model="form.jinchugang" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="有无陪同" label-width="80" prop="youwupeitong">
                    <el-input v-model="form.youwupeitong" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="联系电话" label-width="80" prop="telephone">
                    <el-input v-model="form.telephone" class="width-120"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="旅客或航空公司诉求" label-width="80" prop="passengerAirlineRequest">
                    <el-input v-model="form.passengerAirlineRequest" maxlength="256" rows="3" show-word-limit type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="生命体征" label-width="80" prop="shengmingtizheng">
                    <el-input v-model="form.shengmingtizheng" />
                  </el-form-item>
                </el-col>  
                <el-col :span="24">
                  <el-form-item label="重要情况记录" label-width="80" prop="importantNotes">
                    <el-input v-model="form.importantNotes" maxlength="256" rows="3" show-word-limit type="textarea"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="是否需要流调" label-width="80" prop="shifouxuyaoliutiao">
                    <el-radio-group v-model="form.shifouxuyaoliutiao">
                      <el-radio
                        v-for="dict in dictDataMap['sys_yes_no']"
                        :key="dict.dictValue"
                        :border="true"
                        :value="dict.dictValue"
                      >{{ dict.dictLabel }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="口头流调" label-width="80" prop="koutouliutiao">
                    <el-checkbox v-model="form.koutouliutiao" @change="ktliudaochange"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="书面流调" label-width="80" prop="shumiantouliutiao">
                    <el-checkbox v-model="form.shumiantouliutiao" @change="smliudaochange"></el-checkbox>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="处理" label-width="80" prop="chuli">
                    <el-input v-model="form.chuli" maxlength="256" rows="3" show-word-limit type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="其他" label-width="80" prop="other">
                    <el-input v-model="form.other" maxlength="256" rows="3" show-word-limit type="textarea"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </template>
      </el-col>
    </el-row>
  
  </div>
</template>

<script lang="ts" setup>
import {
  addNurseVisitRecord,
  delNurseVisitRecord,
  getNurseVisitRecord,
  selectPageNurseVisitRecord,
  updateNurseVisitRecord
} from "@/api/recordRegistration/nurseVisitRecord.ts";
import {useUserStoreHook} from "@/store/modules/user.ts";
import {useDictStoreHook} from "@/store/modules/dict";

const {proxy} = getCurrentInstance() as any;
const useUserStore = useUserStoreHook();
const dictStore = useDictStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo
const nurseVisitRecordList = ref<any>([])
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  name: "",
  orgId: userInfo.orgId,
  telephone: "",
})
const total = ref(0)
const formRef = ref()
const form = ref<any>({
  name: '',
  age: '',
  nationality: '',
  sex: '',
  shenfen: '',
  hangbanhao: '',
  jinchugang: '',
  telephone: '',
  jiejingshijian: '',
  daoweishijian: '',
  fanhuishijian: '',
  dianhuaneirong: '',
  tongzhibumeng: '',
  jiejingrenyuan: '',
  chuzhenhaoshi: '',
  youwupeitong: '',
  passengerAirlineRequest: '',
  shengmingtizheng: '',
  importantNotes: '',
  shifouxuyaoliutiao: '',
  koutouliutiao: '',
  shumiantouliutiao: '',
  chuli: '',
  other: '', 
})

const rules = ref<any>({
  name: [
    {
      required: true, message: "姓名不能为空", trigger: "blur"
    }
  ],
})
let dictDataMap = ref(dictStore.isTypeGetData("medical_insurance_type", "sys_yes_no"));
function handleQuery() {
  getList()
}

function resetQuery() {
  queryParams.value.name = ""
  queryParams.value.telephone = ""
  reset()
  getList()
}

function handleAdd() {
  reset()
  form.value.patientId = ''

}

/** 查询现场救护站门（急）诊记录(重庆江北)列表 */
function getList() {
  selectPageNurseVisitRecord(queryParams.value).then((response: any) => {
    nurseVisitRecordList.value = response.rows;
    total.value = response.total;
  });
}


/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _recordId = row.recordId
  getNurseVisitRecord(_recordId).then((response: any) => {
    form.value = response.data;
  });
}


/** 删除按钮操作 */
function handleDelete(row) {
  const _recordId = row.recordId
  ElMessageBox.confirm('是否确认删除数据？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    delNurseVisitRecord(_recordId).then(() => {
      getList();
      ElMessage.success("删除成功");
    })
  })
}

/** 提交按钮 */
function submitForm() {
  (formRef.value as any).validate(valid => {
    if (valid) {
      ElMessageBox.confirm('是否确认保存？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        if (form.value.recordId != null) {
          updateNurseVisitRecord(form.value).then(() => {
            ElMessage.success("修改成功");
            reset();
            getList();
          })
        } else {
          addNurseVisitRecord(form.value).then(() => {
            ElMessage.success("新增成功");
            reset();
            getList();
          })
        }
      })
    }
  })
}

// 表单重置
function reset() {
  form.value = {
    recordId: undefined, 
    name: '',
    age: '',
    nationality: '中国',
    sex: '',
    shenfen: '',
    hangbanhao: '',
    jinchugang: '进港',
    telephone: '',
    jiejingshijian: '',
    daoweishijian: '',
    fanhuishijian: '',
    dianhuaneirong: '',
    tongzhibumeng: '',
    jiejingrenyuan: '',
    chuzhenhaoshi: '',
    youwupeitong: '',
    passengerAirlineRequest: '',
    shengmingtizheng: '',
    importantNotes: '',
    shifouxuyaoliutiao: '',
    koutouliutiao: '',
    shumiantouliutiao: '',
    chuli: '',
    other: '', 
    orgId: queryParams.value.orgId,
    patientId: undefined
  }
}

function printDiv() {
  let url = "/business/nurseVisitRecord/print";
  const formData = new FormData()
  formData.append("recordId", form.value.recordId)
  formData.append("orgId", form.value.orgId)
  // pdf打印 、打印预览
  proxy.$printPdfPublic(url, formData).then(res => {
    if (res) {
    } else {
      console.error('打印失败')
    }
  })
}

function ktliudaochange() {
  if (form.value.koutouliutiao == true) {
    form.value.shumiantouliutiao = false;
  } 
}
function smliudaochange() {
  if (form.value.shumiantouliutiao == true) {
    form.value.koutouliutiao = false; 
  } 
}
getList()
</script>

<style scoped>
.a4-paper-responsive {
  height: calc(100% - 20px); /* 高度自适应 */
  border: 1px solid #027687;
  padding: 0 20px 0 20px;
  overflow-y: auto
}

:deep(.tigejiancha-input) {
  margin-left: -10px
}

:deep(.tigejiancha-input .el-input__wrapper .el-input__inner) {
  width: 60px
}

:deep(.el-input-group__append) {
  width: 40px;
  padding: 0 5px;
}

</style>

